<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      @close="dialogClose"
    >
      <el-form :model="form" :rules="stuRules" ref="addStuRuleForm">
        <el-form-item label="头像">
          <el-upload
            class="uploadAvatar"
            ref="uploadAvatar"
            action="/api/students/uploadStuAvatar"
            list-type="picture-card"
            :on-success="uploadSuccess"
            :on-remove="removeAvatar"
            :limit="1"
            name="headimgurl"
            :multiple="false"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目地址" prop="productUrl">
          <el-input v-model="form.productUrl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="class">
          <el-input v-model="form.class" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-input v-model="form.city" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学历" prop="degree">
          <el-input v-model="form.degree" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="off">取 消</el-button>
        <el-button type="primary" @click="confirmClick('addStuRuleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    /* 添加项目 */
    this.$bus.$on("add-Stu", () => {
      this.dialogFormVisible = true;
      this.title = "增加学员信息";
      this.action = "add";
    });
    /* 编辑项目 */
    this.$bus.$on("edit-Stu", (row) => {
      this.form = row;
      this.form.headimgurl = row.headimgurl;
      this.dialogFormVisible = true;
      this.title = "编辑学员信息";
      this.action = "edit";
    });
  },
  data() {
    return {
      dialogFormVisible: false,
      title: "增加学院信息",
      action: "add", //操作是增加还是编辑
      form: {
        name: "",
        productUrl: "",
        headimgurl: "",
        class: "",
        age: "",
        city: "",
        degree: "",
        description: "",
      },
      newForm: {},
      stuRules: {
        name: [{ required: true, message: "请输入名字", trigger: "blur" }],
        class: [{ required: true, message: "请输入班级", trigger: "blur" }],
        degree: [{ required: true, message: "请输入学历", trigger: "blur" }],
        city: [{ required: true, message: "请输入城市", trigger: "blur" }],
        productUrl: [
          { required: true, message: "请输入项目地址", trigger: "blur" },
        ],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    /* xxx掉对话框 */
    dialogClose() {
      this.form = this.newForm;
    },
    /* 取消事件 */
    off() {
      this.dialogFormVisible = false;
      this.form = this.newForm;
    },
    uploadSuccess(r) {
      //图片上传成功的回调
      console.log(r);
      this.form.headimgurl = r.headimgurl;
     /*  console.log(this.headimgurl); */
    },
    removeAvatar(r) {},
    /* 点击确认事件 */
    confirmClick(formName) {
      let _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          /* 判断是 add  还是edit事件 分别发送过去 */
          if (_this.action === "add") {
            this.$bus.$emit("addStuing", this.form);
            this.dialogFormVisible = false;
            this.form = this.newForm;
          } else {
            this.$bus.$emit("editStuing", this.form);
            this.dialogFormVisible = false;
            this.form = this.newForm;
          }
        } else {
          this.$message.error("请上传完整的信息");
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.uploadAvatar {
  text-align: left;
}
.el-upload-list__item.is-success,
.el-upload--picture-card {
  width: 100px !important;
  height: 100px !important;
  line-height: 100px !important;
}
.el-dialog__header {
  padding: 0 !important;
  line-height: 60px;
}
</style>